<template>
  <div class="right-fix" v-if="isPc">
    <ul :style="{ opacity: show ? 1 : 0, 'pointer-events': show ? 'auto' : 'none' }">
        <li v-for="(item, index) in list" :key="index" @click="link(item)" :class="{ active: activeIndex === index, dack: getDack(index) }"><small>{{ item['name' + En] }}</small> <span></span> </li>
    </ul>
    <!-- <ewm></ewm> -->
  </div>
</template>

<script>
import protal from "@/api/protal"
import ewm from '@/components/rightEwm.vue';

export default {
    components: {
        ewm
    },
    data() {
        return {
            list: [],
            activeIndex: 0,
            show: false,
            scrollTop: 0,
            st: 0,
            timer: null
        }
    },
    created() {
        protal.getJson('right-menu', data => {
            this.list = data
        })
    },
    mounted() {
        const st = document.documentElement.clientHeight
        this.st = st
        setTimeout(() => {
            this.list.forEach(item => {
                if ($('#' + item.link)) {
                    item.scrollTop = $('#' + item.link).offset().top  - st * 0.7
                }
            });
        }, 1000)
        window.addEventListener('scroll', e => {
            if (!this.list[0] || !$('#' + this.list[0].link)) return
            clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                this.list.forEach(item => {
                    if ($('#' + item.link).offset()) {
                        item.scrollTop = $('#' + item.link).offset().top  - st * 0.7
                    }
                });
            }, 100)

            if (!this.list.length) return
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            this.scrollTop = scrollTop
            if (scrollTop > this.list[0].scrollTop) {
                this.show = true
            } else {
                this.show = false
            }
            this.list.forEach((item, index) => {
                if (scrollTop > item.scrollTop) {
                    this.activeIndex = index
                }
            })

            if ($('#sponsor').offset()) {
                if ((scrollTop + st * 0.7) > $('#sponsor').offset().top) {
                    this.dack = true
                } else {
                    this.dack = false
                }
            }

        })
    },
    computed: {
        getDack() {
            return (index) => {
                if (!$('#sponsor').offset()) return false
                if ((this.scrollTop + this.st - (this.st * 0.7 - index * 44)) > $('#sponsor').offset().top && (this.scrollTop + this.st - (this.st * 0.7 - index * 44)) < $('#sponsor').offset().top + $('#sponsor').height()) {
                    return true
                } else {
                    return false
                }
            }
        }
    },
    methods: {
        link(item) {
            this.jsAPI('waitan_sideFirstNavigation', {
                firstNavigation_var: item.name,
            })

            if (item.link) {
                const offsetTop = $('#' + item.link).offset().top - 100
                $('html, body').animate({
                    scrollTop: offsetTop
                }, 500);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.right-fix  {
    position: fixed;
    right: 0;
    top: 30%;
    z-index: 99;
    
    ul {
        transition: .3s linear;

        li {
            font-family: AlibabaPuHuiTi_3_45_Light;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 16px;
            text-align: right;
            font-style: normal;
            margin-bottom: 28px;
            cursor: pointer;
            padding-right: 34px;
            transition: .3s;
            position: relative;

            small {
                font-size: 14px;
                line-height: 16px;
            }

            span {
                position: absolute;
                top: 50%;
                height: 1px;
                width: 0;
                right: 0;
                display: flex;
                justify-content: space-between;
                transition: .3s linear;

                &::before {
                    content: "";
                    flex: 0 0 4px;
                    height: 1px;
                    background: #784DFF;
                }

                &::after {
                    content: "";
                    flex: 0 0 20px;
                    height: 1px;
                    background: #784DFF;
                }
            }

            &:last-child {
                margin-bottom: 0;
            }

            &.active {
                font-size: 16px;
                color: #784DFF;

                span {
                    width: 26px;
                }
            }

            &:hover {
                color: #784DFF;
            }

            &.dack {
                color: #000632;

                &.active {
                    color: #784DFF;
                }
            }
        }
    }
}
@media screen and (max-width: 1470px) {
    .right-fix  {
        ul {

            li {
                padding-right: 12px;
                display: flex;
                justify-content: flex-end;

                small {
                    // display: none;
                    width: auto;
                    height: 28px;
                    background: #784DFF;
                    border-radius: 14px;
                    padding: 0 10px;
                    display: flex;
                    align-items: center;
                    font-family: AlibabaPuHuiTi_3_65_Medium;
                    font-size: 14px;
                    color: #fff;
                    line-height: 1;
                    text-align: right;
                    font-style: normal;
                    position: relative;
                    z-index: 1;
                    opacity: 0;
                    transition: .3s linear;
                }

                span {
                    position: absolute;
                    top: 50%;
                    height: 1px;
                    width: 14px;
                    right: 0;
                    display: flex;
                    justify-content: space-between;
                    transition: .3s linear;

                    &::before {
                        content: "";
                        flex: 0 0 4px;
                        height: 1px;
                        background: #784DFF;
                    }

                    &::after {
                        content: "";
                        flex: 0 0 12px;
                        height: 1px;
                        background: #784DFF;
                    }
                }

                &:last-child {
                    margin-bottom: 0;
                }

                &.active {
                    font-size: 16px;
                    color: #784DFF;

                    small {
                        opacity: 1;
                    }

                    span {
                        width: 18px;
                    }
                }

                &:hover {
                    color: #784DFF;

                    small {
                        opacity: 1;
                    }
                }

                &.dack {
                    color: #000632;

                    &.active {
                        color: #784DFF;
                    }
                }
            }
        }
    }
}
</style>
